import React from 'react';
import { Form, Input, DatePicker, Row, Col } from 'antd';
import { formItemLeftList, formItemRightList } from '../config';
const CreateForm = (props: any) => {
  return (
    <Form
      ref={props.newref}
      layout={'vertical'}
      style={{
        minHeight: '100%',
        flex: 1,
        overflow: 'auto',
        width: '100%',
        overflowX: 'hidden'
      }}
    >
      <Row>
        <Col xs={{ span: 5, offset: 2 }} lg={{ span: 8, offset: 2 }}>
          {formItemLeftList.map((item) => (
            <Form.Item
              key={item.name}
              label={item.label}
              name={item.name}
              rules={[{ required: true, message: item.message }]}
            >
              {item.name === 'bookDate' ? (
                <DatePicker showTime format="YYYY-MM-DD HH:mm:ss" />
              ) : (
                <Input />
              )}
            </Form.Item>
          ))}
        </Col>
        <Col xs={{ span: 5, offset: 2 }} lg={{ span: 8, offset: 2 }}>
          {formItemRightList.map((item) => (
            <Form.Item
              key={item.name}
              label={item.label}
              name={item.name}
              rules={[{ required: true, message: item.message }]}
            >
              {item.name === 'productionCompletionDate' ? (
                <DatePicker showTime format="YYYY-MM-DD HH:mm:ss" />
              ) : (
                <Input />
              )}
            </Form.Item>
          ))}
        </Col>
      </Row>
    </Form>
  );
};

export default CreateForm;
